/*
    This menu css was described here : http://solardreamstudios.com/learn/css/cssmenus/

    The css menu is 4 levels deep. If more menus are needed one can easily add them. Have 
    a look at the code below to see how the 2nd, 3rd and 4th levels are done.
*/

/* Root = Vertical, Secondary = Vertical */

ul.verticalFlexiMenu,
ul.verticalFlexiMenu li,
ul.verticalFlexiMenu ul {
  margin: 0;
  border: 0 none;
  padding: 0px;
  width: 160px; /*For KHTML*/
  list-style: none;
  height: auto !important;
}

ul.verticalFlexiMenu li {
  display: block !important;/*For GOOD browsers*/
  display: inline; /*For IE*/
  position: relative;  
}

/* Root Menu */
ul.verticalFlexiMenu a {
  border: 1px solid #FFF;
  border-right-color: #000099;
  border-bottom-color: #000099;
  padding: 0 6px;  
  background: #EEE;
  display: block;
  color: #666;
  font: bold 10px Verdana, Arial, Helvetica, sans-serif;
  line-height: 24px;
  min-height: 24px;
  text-decoration: none;
  height: auto !important;  
  height: 1%; /*For IE*/
}

ul.verticalFlexiMenu :hover {
    z-index: 9999;
}

/* Root Menu Hover Persistence */
ul.verticalFlexiMenu a:hover,
ul.verticalFlexiMenu li:hover a,
ul.verticalFlexiMenu li.iehover a {
  background: #000099;
  color: #FFF;  
}

/* 2nd Menu */
ul.verticalFlexiMenu li:hover li a,
ul.verticalFlexiMenu li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul.verticalFlexiMenu li:hover li a:hover,
ul.verticalFlexiMenu li:hover li:hover a,
ul.verticalFlexiMenu li.iehover li a:hover,
ul.verticalFlexiMenu li.iehover li.iehover a {
  background: #000099;
  color: #FFF;
}

/* 3rd Menu */
ul.verticalFlexiMenu li:hover li:hover li a,
ul.verticalFlexiMenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul.verticalFlexiMenu li:hover li:hover li a:hover,
ul.verticalFlexiMenu li:hover li:hover li:hover a,
ul.verticalFlexiMenu li.iehover li.iehover li a:hover,
ul.verticalFlexiMenu li.iehover li.iehover li.iehover a {
  background: #000099;
  color: #FFF;
}

/* 4th Menu */
ul.verticalFlexiMenu li:hover li:hover li:hover li a,
ul.verticalFlexiMenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul.verticalFlexiMenu li:hover li:hover li:hover li a:hover,
ul.verticalFlexiMenu li.iehover li.iehover li.iehover li a:hover {
  background: #000099;
  color: #FFF;
}

/* Applies to all ul elements. Note the display:none which will hide the <ul> */
ul.verticalFlexiMenu ul,
ul.verticalFlexiMenu ul ul,
ul.verticalFlexiMenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul.verticalFlexiMenu li:hover ul ul,
ul.verticalFlexiMenu li:hover ul ul ul,
ul.verticalFlexiMenu li.iehover ul ul,
ul.verticalFlexiMenu li.iehover ul ul ul {
  display: none;
}

/*
 The following will enable the displaying of the <ul> elements as the user
 navigates the menu.
*/
ul.verticalFlexiMenu li:hover ul,
ul.verticalFlexiMenu ul li:hover ul,
ul.verticalFlexiMenu ul ul li:hover ul,
ul.verticalFlexiMenu li.iehover ul,
ul.verticalFlexiMenu ul li.iehover ul,
ul.verticalFlexiMenu ul ul li.iehover ul {
  display: block;
}

ul.verticalFlexiMenu li:hover.menuItemBullet>a,
ul.verticalFlexiMenu li:hover.menuItemBullet>ul li:hover.menuItemBullet>a {
    background: #000099 url('menu_indicators.png') no-repeat -1314px 50%;
}

ul.verticalFlexiMenu .menuItemBullet  a,
ul.verticalFlexiMenu .menuItemBullet ul .menuItemBullet a,
ul.verticalFlexiMenu .menuItemBullet ul .menuItemBullet .menuItemBullet a {
    background: #EEE url('menu_indicators.png') no-repeat -370px 50%;
}

/*IE 6 Specific start*/
/* The arrow icons must stay visible when navigating the menus. 
  Only IE browsers will have the 'iehover' class injected
  on the LI elements. 'iehover' is added as a class in the menu.js script
  I do not have IE 5.5 anymore so perhaps this applies to 5.5 as well.
*/
ul.verticalFlexiMenu .menuItemBullet a:hover,
ul.verticalFlexiMenu li.iehover a,
ul.verticalFlexiMenu .menuItemBullet .menuItemBullet a:hover,
ul.verticalFlexiMenu li.iehover li.iehover a,
ul.verticalFlexiMenu .menuItemBullet .menuItemBullet .menuItemBullet a:hover,
ul.verticalFlexiMenu li.iehover li.iehover li.iehover a {
    background: #000099 url('menu_indicators.png') no-repeat -370px 50%;
}
/*IE 6 Specific end*/